<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
        }
        .box2{
           background-color: #bfa;
           margin-left: 0;
           /* transition: all 2s; */
           /* 
                过渡( transition)
                    -通过过渡可以指定一个属性发生变化时的切换方式
                    -通过过渡可以创建一些非常好的效果,提升用户的体验
           */
           /* transition-property: 指定要执行过渡的属性
                    多个属性使用,逗号隔开
                    如果所有属性需要过渡,则使用all关键字
                    大部分属性都支持过渡效果,注意过渡时一定是一个有效数值像另外一个有效值进行过渡
                    transition-property:width,height;

           transition-duration:    指定过渡效果的持续时间 
                    时间单位,s和ms 1s=1000ms 可以分别指定时间
                    transition-duration:100ms,2s;


             transition-timing-function:过渡的时序函数
                    指定过渡的执行的方式
                        默认值
                    可选值
                        ease默认值,慢速开始,先加速,再减速
                        linear 匀速运动
                        ease-in 加速运动
                        ease-out 减速运动
                        ease-in-out 先加速 后减速
                        cubic-bezier()来指定时序函数
                        http://cubic-bezier.com
                        用的是二个点来指定一个坐标函数

                        step()分步执行过渡效果
                            可以设置第二个值
                                end:在时间结束时执行(默认)
                                strat:在时间开始时执行
           transition-delay:过渡效果的延迟  (等待一段时间后执行)   

           
           */


           /* transition-property:all;
           transition-duration:2s; */
           /* transition-timing-function: cubic-bezier(0,0,1,1); */
           /* transition-timing-function: steps(2,start); */
           /* transition-delay:2s; */

           /* transition: ; 可以同时设置同时设置过渡相关的所有属性,只有一个要求,如果写延迟,则二个时间中第一个是持续时间,第二个是延迟 */
           transition: margin-left 2s 1s;
        }
        .box3{
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }
        .box1:hover div{
           margin-left: 700px;
            /* background-color: orange; */
            /* margin-left: 0; */
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
    </div>
    <div class="box3">
    </div>
</body>
</html>